<template>
	<view :style="warpCss" class="overflow-hidden" v-if="info">

		<view v-if="diyComponent.style == 'style-4'"
			class="flex flex-1 flex-col items-center justify-center style-4 px-[24rpx] py-[20rpx] bg-[var(--page-bg-color)]">
			<view class="flex  w-[100%] items-center">
				<!-- <image :src="img('static/resource/images/diy/member/style4_vip.png')" mode="aspectFit"
						class="w-[70rpx] h-[32rpx] pt-[1rpx]" /> -->
				<!-- <text class="text-[32rpx] text-[#FFEFB0] leading-[normal] ml-[8rpx] font-500 max-w-[420rpx] truncate">员工码</text> -->
			</view>
			<view class="flex flex-col  ">

				<view class="sidebar-margin  mt-[var(--top-m)] mb-[var(--top-m)] card-template">

					<view class="flex flex-col items-center justify-center">
						<image v-if="!!painterImageUrl" :src="painterImageUrl" class="w-[500rpx] h-[auto]" mode="widthFix"
							@longpress="saveQr()">
						</image>
					</view>
				</view>
				<view class="flex items-center justify-center rounded-[30rpx] box-border  p-[30rpx] h-[80rpx]"
					style="margin: 0 auto;">
					<text class="text-[40rpx] text-[#333] mr-[8rpx]">长按保存员工码</text>

				</view>

			</view>
			<!-- <view class="  flex  w-[100%]  flex-col text-[#B0B0B0] text-[24rpx] mt-[10rpx] leading-[32rpx]">
			<text>使用说明</text>
			<text class="text-[#FFEFB0]">动态码有效期120秒,过期后请手动刷新。</text>
			<text class="text-[#FFEFB0]">会员码仅用于支付时或确认订单时向收银员出示，请勿发送他人。</text>
		</view> -->
		</view>
		<u-popup :show="show" mode="center" :round="10" :closeable="true" @close="show = false"
			:safe-area-inset-bottom="false">
			<view class="dialog-popup">
				<view class="title">提示</view>
				<view class="message">您拒绝了保存图片到相册的授权请求，无法保存图片到相册，如需正常使用，请授权之后再进行操作。</view>
				<view class="action-wrap">
					<view @click="closeDialog">取消</view>
					<view>
						<button type="default" class="authorization-btn" open-type="openSetting" @opensetting="closeDialog"
							hover-class="none">立即授权</button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script lang="ts" setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import useDiyStore from '@/app/stores/diy'
import { getWxaQrcodeimg } from '@/addon/shop/api/shopOrder'
import { img } from '@/utils/common';

const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
/***渲染二维码 **/
const painterImageUrl = ref(); // 海报 url
const showPainter = ref(true)
// 渲染海报

// 获得生成的图片
const setPainterImageUrl = (path) => {

	painterImageUrl.value = path;
	showPainter.value = false
};
const show = ref(false);

const closeDialog = () => {
	show.value = false;
}

// #ifdef MP || APP-PLUS
//小程序中保存海报
const saveQr = () => {
	let url = img(painterImageUrl.value);
	uni.downloadFile({
		url: url,
		success: (res) => {
			if (res.errMsg == "downloadFile:ok") {
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: () => {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
					},
					fail: (err) => {
						if (err.errno == 104) {
							let msg = '用户未授权隐私权限，将图像保存到相册失败';
							uni.showToast({ title: msg, icon: 'none' })
						} else if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny" ||
							err.errMsg == "saveImageToPhotosAlbum:fail:auth denied") {
							show.value = true;
						} else if (err.errMsg == "saveImageToPhotosAlbum:fail cancel") {
							let msg = '用户取消将图片保存到相册';
							uni.showToast({ title: msg, icon: 'none' })
						} else {
							uni.showToast({ title: err.errMsg, icon: 'none' })
						}
					}
				});
			}
		},
		fail: (err) => {
			uni.showToast({
				title: err.errMsg,
				icon: 'none'
			});
		}
	});
}
// #endif
/**
 * 生成核销二维码
 */
const markCode = (text) => {
	let params = {
		path: 'app/pages/auth/authorizedLogin',
		width: 430,
		checkPath: false,
		scene: encodeURIComponent('employeeId=' + text)
	}
	getWxaQrcodeimg(params).then((res) => {
		setPainterImageUrl(res.data)
	})
}

onMounted(() => {
	nextTick(() => {
		markCode(info.value.id)
	})

})
const diyComponent = computed(() => {
	if (diyStore.mode == 'decorate') {
		return diyStore.value[props.index];
	} else {
		return props.component;
	}
})

const warpCss = computed(() => {
	var style = '';
	if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	return style;
})

watch(
	() => props.pullDownRefreshCount,
	(newValue, oldValue) => {
		// 处理下拉刷新业务
	}
)

// 获取会员等级列表
const currIndex = ref(0) //当前会员索引
const wap_member_info = ref(uni.getStorageSync('wap_member_info'));
const info: any = computed(() => {
	// 装修模式
	if (diyStore.mode == 'decorate') {
		currIndex.value = 1;
		return {
			code: '123456	',
			growth: 5
		}
	} else {
		return wap_member_info.value || {
			code: '123456	',
			growth: 5
		};
	}
})





</script>

<style lang="scss" scoped>
.style-bg-1 {
	background: linear-gradient(to right, #1F1313, #4D4646);
}

.style-btn {
	background: linear-gradient(to right, #FFEACB, #FFD195);
}

.style-bg-2 {
	background: linear-gradient(to right, #484846, #222222);
	border-bottom-left-radius: 320rpx 16rpx;
	border-bottom-right-radius: 320rpx 16rpx;
}

.style-bg-3 {
	background: linear-gradient(to right, #F9D9AC, #E9B46D);
}

.style-border-3 {
	position: relative;

	&:after {
		content: "";
		position: absolute;
		background: linear-gradient(to right, #F0D2A9, #DBA051);
		height: 2rpx;
		bottom: 0;
		left: 0;
		right: 0;
	}
}

.style-4 {
	background-size: cover;
	background-repeat: no-repeat;

	.style-btn {
		background: linear-gradient(#FFF3C1, #FFEFB0);
	}
}

.style-5 {
	background-size: cover;
	background-repeat: no-repeat;

	.content-head {
		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.14));
	}

	.style-btn {
		background: linear-gradient(#FFFFFF, #FFF8CC);
	}
}
</style>
